$(".headsBox").load("http://localhost:3000/public/header.html .jj_header",function(){
    const id = location.search.split("=")[1];
    // console.log(id)
// // 方法一：获取所有商品数据，前端筛选（不推荐）
// // 方法二：根据id请求后端接口，直接获取指定数据（后端筛选）（推荐）

ajax("http://localhost:3000/api",res=>{
    res = JSON.parse(res).msg;
    // console.log(res);
    let i = 0;
    res.some((val,idx)=>{
        i = idx;
        return val.proId === id
    })

    // console.log(res[i])
    // 渲染小图
    $(".bigImg>img").src = res[i].imgs1;
    // 渲染大图
    $(".glass>img").src = res[i].imgs1;
    // 渲染图片列表
    // console.log(res[i].img2)
    let str = "";
    res[i].img2.forEach(val=>{
        str += `<li><img src="${val}" alt=""></li>`
    })
    $("#imageMenu ul").innerHTML = str;

    // 渲染标题
    $(".name").innerHTML = res[i].proName;
    // 计算并渲染现价
    $(".cost-price").innerHTML = "￥" + res[i].price 
    // 渲染原价
    $(".price").innerHTML = "￥" + res[i].price;



    // 点击小图切换中图和大图
function Tab(){
    this.li = document.querySelectorAll("#imageMenu ul li");
    // console.log(this.li)
    this.sImg = document.querySelector(".bigImg img");
    this.bImg = document.querySelector(".glass img");
    this.data = res[i].img2;
    this.index = 0;
    this.addEvent();
}
Tab.prototype.addEvent = function(){
    const that = this;
    for(let i=0;i<this.li.length;i++){
        this.li[i].xuhao = i;
        this.li[i].onclick = function(){
            that.hide();
            that.getIndex(this);
        }
    }
}
Tab.prototype.hide = function(){
    // this.li[this.index].className = "";
}
Tab.prototype.getIndex = function(now){
    this.index = now.xuhao;
    this.show();
}
Tab.prototype.show = function(){
    // this.li[this.index].className = "active";
    this.sImg.src = this.data[this.index];
    this.bImg.src = this.data[this.index];
}
new Tab();



// 放大镜功能
class Magnifier{
    constructor(){
        this.sBox = document.querySelector(".bigImg");
        // console.log(this.sBox)
        this.sSpan = document.querySelector(".bigImg span");
        this.bBox = document.querySelector(".glass");
        // console.log(this.bBox)

        this.bImg = document.querySelector(".glass img");
        // console.log(this.bImg)
        this.addEvent();
    }
    move(ops){
        let l = ops.x - this.sSpan.offsetWidth/2;
        let t = ops.y - this.sSpan.offsetHeight/2;
        if(l < 0) l = 0;
        if(t < 0) t = 0;
        if(l > this.sBox.offsetWidth - this.sSpan.offsetWidth){
            l = this.sBox.offsetWidth - this.sSpan.offsetWidth;
        }
        if(t > this.sBox.offsetHeight - this.sSpan.offsetHeight){
            t = this.sBox.offsetHeight - this.sSpan.offsetHeight;
        }
        this.sSpan.style.left = l + "px";
        this.sSpan.style.top = t + "px";
        const x = l / (this.sBox.offsetWidth - this.sSpan.offsetWidth);
        const y = t / (this.sBox.offsetHeight - this.sSpan.offsetHeight);
        this.bImg.style.left = -x * (this.bImg.offsetWidth - this.bBox.offsetWidth) + "px";
        this.bImg.style.top = -y * (this.bImg.offsetHeight - this.bBox.offsetHeight) + "px";
    }
    init(){
        // console.log(this.bImg.offsetWidth);
        // console.log( this.bBox.offsetWidth);
        this.sSpan.style.width = this.bBox.offsetWidth / this.bImg.offsetWidth * this.sBox.offsetWidth + "px";
        this.sSpan.style.height = this.bBox.offsetHeight / this.bImg.offsetHeight * this.sBox.offsetHeight + "px";
    }
    addEvent(){
        const that = this;
        this.sBox.onmouseenter = function(){
            that.show();
        }
        this.sBox.onmouseleave = function(){
            that.hide();
        }
        this.sBox.onmousemove = function(eve){
            const e = eve || window.event;
            const pos = {
                x:e.offsetX,
                y:e.offsetY
            };
            that.move(pos);
            // console.log(1)
        }
    }
    show(){
        this.sSpan.style.display = "block";
        this.bBox.style.display = "block";
        this.init();
    }
    hide(){
        this.sSpan.style.display = "none";
        this.bBox.style.display = "none";
    }
}
new Magnifier();





},{
    type:"getGoods"
})


function $(s){
    return document.querySelector(s);
}


function ajax(url, callback, data){
    let str = "";
    for(let i in data){
        str += `${i}=${data[i]}&`
    }
    url += "?" + str;
    const xhr = new XMLHttpRequest();
    xhr.open("get",url)
    xhr.onload = function(){
        if(xhr.status === 200){
            callback(xhr.responseText)
        }
    }
    xhr.send();
}








})
$(".footsBox").load("http://localhost:3000/public/header.html .jj_foot")
